/* eslint-disable no-unused-vars */
import React, { ReactNode } from 'react'
import { HeaderContainer } from './style'
import { LOGO_PUBLIC } from '../../static/index'
import { NAV_LIST, NOW_VERSION } from './contants'

export const Head: React.FC = (): ReactNode => {
  return (
    <HeaderContainer>
      <div className="nav-container">
        <div className="logo">
          <img src={LOGO_PUBLIC} />
        </div>
        <div className="nav-item-container">
          {NAV_LIST.map((item: any) => (
            <div className="nav-item" key={item.id}>
              <a href={item.link}>{item.name}</a>
            </div>
          ))}
        </div>
        <div className="separator"></div>
        <div className="now-version-container">
          {NOW_VERSION}
          <strong>
            <a
              className="now-version"
              href="https://lol.qq.com/gicp/news/410/37044594.html"
              target="_blank"
              rel="noopener noreferrer"
            >
              点击查看最新版本内容
            </a>
          </strong>
        </div>
      </div>
    </HeaderContainer>
  )
}
